<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="" content="">
    <meta name="'" content="">
    <title>最新动态</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        section{
            overflow: hidden;
            position: relative;
            width: 350px;
            height: 500px;
            border-radius: 20px;
            margin: 200px auto 0;
            /*background-color: yellow;*/
        }
        .container{
            clear: both;
            width: 130px;
            height: 40px;
            margin: auto;
            padding: 10px 10px;
            border-radius: 20px;
            background-color: silver;
            z-index: 99;
        }
        .dialogue_frame{
            position: absolute;
            overflow: scroll;
            top: 500px;
            width: 330px;
            height: 440px;
            padding: 10px;
            border-radius: 10px;
            background-image: url("img/2.jpg");
            transitionProperty:all;
            transition-duration: 1s;
            z-index: 1;
        }
        .photo{
            float: left;
            overflow: hidden;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-image: url("img/1.jpg");
            background-size: 40px;
            background-position: 0px 0px;
        }
        .computer{
            float: right;
            overflow: hidden;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-image: url("img/3.jpg");
            background-size: 40px;
            background-position: 0px 0px;
        }
        #login{
            float: right;
            height: 30px;
            width: 50px;
            margin: 5px 15px;
            border: none;
            border-radius: 10px;
        }
        input{
            margin: auto;
            border: 1px;
        }
        #text{
            border: none;
            float: left;
            width: 0px;
            height: 30px;
            margin: 5px 10px;
            transition-property: all;
            transition-duration: 1s;
            transition-delay: 1s;
        }
        .list_array{
            list-style: none;
            height: 40px;
            width: 300px;
            margin-bottom: 10px;
        }
        span{
            display: inline-block;
            width: 250px;
            line-height: 40px;
            margin: 0px 5px;
            border-radius: 10px;
            background-color: rgba(142,193,248,0.6);
        }
    </style>
</head>
<body>
    <section>
        <div class="container">
            <div class="photo"></div>
            <div id="textbox">
                <!--<input type="text" id="text">-->
            </div>
            <input type="button" value="登录" id="login" onclick="login_activity()">
        </div>
        <div class="dialogue_frame">
            <ul id="list"></ul>
        </div>
    </section>
</body>
<script type="text/javascript">
    var sign=document.getElementById('login');                  //获取 登陆按钮变量
    var logoin_box=document.getElementsByClassName('container');//获取 开始的登陆界面div
    var box=document.getElementsByClassName('dialogue_frame');  //获取 聊天记录大框div
    var text_box=document.getElementById('textbox');            //获取 输入框所在的盒子div
    var list_box=document.getElementById('list');               //获取 聊天记录ul
     function login_activity(){
        if(sign.value=='登录'){                                   //是否存在登陆这个操作
            logoin_box[0].style.width='330px';                    //操作登陆界面。同时把按钮的文字变为发送
            logoin_box[0].style.transitionProperty='width';
            logoin_box[0].style.transitionDuration='1s';
            sign.value='发送';
            alert('登陆成功！！！');
            box[0].style.top='60px';                              //滑入聊天记录框
            text_box.innerHTML+='<input type="text" value="" id="text">';//给输入框所在div中加入text控件
            function text_width() {
                var Text=document.getElementById('text');         //当聊天输入框text控件存在后获取
                Text.style.width='190px';                          //聊天输入框text控件动画过度从0变为190px，但是存在BUG！！
            }
            text_width();                                          //执行text_width（）方法
            console.log('变成发送了');                             //控制台记录
        }
        else {                                                    //不是登陆则是发送
            var Text=document.getElementById('text');             //重新获取聊天输入框text控件，上一次变量会执行完会凋亡
            if(Text.value=='')                                    //判断输入框是否为空
            {
                alert('想啥啦不打字你想发送？？？！！');           //提醒
            }
            else {                                                  //不为空时，输出
                var array_box='<li class="list_array"><div class="photo"></div><span class="list_array_text">'+Text.value+'</span></li>';
                list_box.innerHTML+=array_box;
                //console.log(Text.value);
                console.log('已经发送');                            //控制台记录
                var bool=document.getElementsByClassName('list_array_text');    //获取发出聊天记录
                if(bool.length>0) {                                             //判断是否已经发出了，如果发出数组不为0
                    list_box.innerHTML+='<li class="list_array"><span class="list_array_text">你说什么？我只知道我很帅！</span><div class="computer"></div></li>';
                 }
                console.log('电脑已经回答');                        //控制台记录
            }

        }
    }

</script>
</html>